<template>
    <section class="flex">
        <sidebar />
        <div class="flex-1 p-4">


            <div class="relative h-half-screen  rounded-lg grid md:grid-cols-2 bg-image">

                <!-- <video class="absolute top-0 left-0 -z-10 h-full w-full" autoplay loop playsinline muted
                    src="https://alioss-cdn.mzyun.tech/55ai/20240610/b7a021e38f1ee2cae55b2c14cf329e55.mp4"> </video> -->
                <div class="m-12">
                    <div class="bg-gray-500 text-white text-sm text-center rounded-lg px-2 py-1 flex-0 w-28">明志智能抠图
                    </div>
                    <h1 class="text-4xl font-bold my-4">一键抠除背景</h1>
                    <p class="text-lg">智能抠除，秒级移除背景</p>
                </div>
                <div class="m-4 p-4 bg-white rounded-lg">
                    <div class="border-2 border-dashed rounded-lg h-full">


                        <div v-if="img_result" class="h-full grid md:grid-cols-3 relative">

                            <div class="absolute top-2 right-2 cursor-pointer" @click="img_result = ''">

                                <el-icon size="25">
                                    <el-icon-circle-close />
                                </el-icon>
                            </div>
                            <img class="h-full md:col-span-2" :src="img_result" alt="">
                            <div class="flex flex-col justify-center items-center">

                                <div class="flex my-4 w-36 justify-between">
                                    <div class="text-sm cursor-pointer">
                                        <i class="fa fa-adjust" />
                                        调整
                                    </div>
                                    <div class="text-sm  cursor-pointer">
                                        <i class="fa fa-exchange" />
                                        替换
                                    </div>

                                </div>
                                <el-button class="my-4 w-36" type="primary" @click="download">导出</el-button>
                                <el-button class="my-4 w-36">购买金币</el-button>

                            </div>


                        </div>
                        <div v-else class="w-full h-full flex flex-col items-center justify-center">
                            <el-upload action="/api/koutu"
                                :on-success="(res) => { img_result = res.url; console.log(res) }">
                                <el-button type="primary" size="large" class="mx-auto">上传图片<el-icon
                                        class="el-icon--right"><el-icon-upload /></el-icon></el-button>

                            </el-upload>
                            <div class="mt-8 text-sm text-gray-500">上传图片或拖拽图片至此，支持批量处理</div>

                        </div>
                    </div>



                </div>



            </div>
        </div>


    </section>
</template>
<script setup>
useSeoMeta({
    title: '【抠图】在线抠图软件_ps抠图证件照换底色',
    ogTitle: '【抠图】在线抠图软件_ps抠图证件照换底色',
    description: '明志抠图是一款AI人工智能在线自动抠图工具，不管是证件照换底色，还是复杂图片换背景，不用PS，就能轻松实现ps抠图效果。3秒一键抠图，就在明志抠图。',
    ogDescription: '明志抠图是一款AI人工智能在线自动抠图工具，不管是证件照换底色，还是复杂图片换背景，不用PS，就能轻松实现ps抠图效果。3秒一键抠图，就在明志抠图。',
    ogImage: 'https://cdn.mzyun.tech/logo_black.png',
    keywords:"抠图,抠图软件,ps抠图,在线抠图,明志抠图,明志科技,明志"
})

const img_result = ref(null)

const download = () => {
    const link = document.createElement('a')
    link.href = img_result.value
    link.style.display = 'none'
    link.target = '_blank'
    link.download = '明志科技.png'
    link.click()
}





</script>
<style scoped>
.bg-image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('https://cdn.dancf.com/fe-assets/20240520/ce9755928b12140843962db908584e15.png?x-oss-process=image/format,webp');
}
</style>